import React, {Component} from 'react';
import './index.less'
import logo from '../../assets/images/logo.png'
import {Menu} from "antd";
import {Link,withRouter} from 'react-router-dom'
import menuList from "../../config/menuConfig";
import memoryUtils from "../../utils/memoryUtils";

const { SubMenu } = Menu;
class LeftNav extends Component {
    getMenuNodes_map = (menuList) =>{

        return menuList.map(item=>{
            if(!item.children){
                return (
                    <Menu.Item key={item.key} icon={item.icon}>
                        <Link to={item.key}>
                            {item.title}
                        </Link>
                    </Menu.Item>
                )
            }else {
                return (
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {
                            this.getMenuNodes_map(item.children)
                        }
                    </SubMenu>
                )
            }
        })
    }

    getMenuNodes =  (menuList)=>{
        const path = this.props.location.pathname
        return menuList.reduce((pre,item)=>{
            if (this.hasAuth(item)){
                if(!item.children){
                    pre.push(
                        (
                            <Menu.Item key={item.key} icon={item.icon}>
                                <Link to={item.key}>
                                    {item.title}
                                </Link>
                            </Menu.Item>
                        )
                    )
                }else {
                    if(item.children.find(cItem => path.indexOf(cItem.key)===0)) {
                        this.openKey = item.key
                    }
                    pre.push(
                        (
                            <SubMenu key={item.key} icon={item.icon} title={item.title}>
                                {
                                    this.getMenuNodes(item.children)
                                }
                            </SubMenu>
                        )
                    )
                }
            }
            return pre
        },[])
    }
    componentWillMount() {
        this.menuSet = new Set(memoryUtils.user.role.menus || [])
        this.menuNodes = this.getMenuNodes(menuList)
    }
    hasAuth = (item) => {
        const key = item.key
        const menuSet = this.menuSet
        /*
        1. 如果菜单项标识为公开
        2. 如果当前用户是 admin
        3. 如果菜单项的 key 在用户的 menus 中
        */
        if(item.isPublic || memoryUtils.user.username==='admin' || menuSet.has(key)) {
            return true
        // 4. 如果有子节点, 需要判断有没有一个 child 的 key 在 menus 中
        } else if(item.children){
            return !!item.children.find(child => menuSet.has(child.key))
        }
    }
    render() {
        let pathName = this.props.location.pathname
        console.log(pathName)
        if(pathName.indexOf('/product')===0){
            pathName = '/product'
        }
        return (
            <div className="left-nav">
                <Link to='/'>
                    <header className="left-nav-header">
                        <img src={logo}/>
                        <h1>后台系统</h1>
                    </header>
                </Link>

                <Menu theme="dark" selectedKeys={[pathName]} defaultOpenKeys={[this.openKey]} mode="inline">
                    {
                        this.menuNodes
                    }
                </Menu>
            </div>
        );
    }
}
export default withRouter(LeftNav)

